<template>
  <div class="plans-container">
    <div class="title">
      <p class="big-title">小柚计划</p>
      <p class="en-title">您共有 <span>{{todoList.length}}</span> 项计划,&nbsp;加油完成<i class="el-icon-s-flag"></i></p>
      <el-divider content-position="right" >
        <el-button type="warning" @click="centerDialogVisible = true" plain >新建计划</el-button>
      </el-divider>
    </div>
    <div v-if="todoList.length !== 0" class="list" v-loading="loading">
      <el-card v-for="(item, index) in todoList" :key="index" @click="open(item.name, item.id)">
        <el-progress :width="80" :height="80" type="circle" :percentage="((item.progress === 'NaN' ? 0 : item.progress) * 100).toFixed(2) - 0"></el-progress>
        <el-button class="el-icon-delete"  @click="cutdown(item.id)" style="margin-left: 15px"></el-button>
        <el-tooltip class="item" effect="dark" content="点击查看具体计划" placement="bottom">
           <el-button class="el-icon-finished"  @click="open(item.name, item.id)"></el-button>
        </el-tooltip>
        <div class="list-item">
          <div class="state">
          <p id="planName" :title="item.name">{{item.name}}</p>
          <el-tag>{{item.state}}</el-tag>
          </div>
          <span style="font-size: 13px">截止时间：</span>
          <p>{{item.deadline | dateFmt}}</p>
          <el-tag type="danger" v-show="item.tag1">{{item.tag1}}</el-tag>
          <el-tag type="warning" v-show="item.tag2">{{item.tag2}}</el-tag>
        </div>
      </el-card>
    </div>
    <el-empty v-else :image-size="200"></el-empty>
    <el-dialog title="计划详情页" :visible.sync="dialogFormVisible" append-to-body center width="500px">
      <el-form :model="dynamicValidateForm" size="mini">
        <el-form-item  label="计划名称:" :label-width="formLabelWidth">
          {{dynamicValidateForm.name}}
          <el-button class="titles" plain @click="addDomain(dynamicValidateForm.id, dynamicValidateForm.name)">新增待办</el-button>
        </el-form-item>
        <el-form-item class="domain" v-for="domain in dynamicValidateForm.domains" :key="domain.id">
          <!-- <el-switch v-model="domain.bool" :active-value="已完成" :inactive-value=" 未完成"  active-color="#67C23A" inactive-color="#E6A23C" :disabled='domain.bool'>
          </el-switch> -->
          <!-- <template>
            <el-checkbox v-model="domain.bool"></el-checkbox>
          </template> -->
          <el-input v-model="domain.name" @blur="updateThin(domain, dynamicValidateForm.name, 'update')"></el-input>
          <el-button :type="domain.bool ? 'success' : 'warning'" @click="updateThin(domain, dynamicValidateForm.name, 'state')">{{domain.state}}</el-button>
          <el-button @click.prevent="removeDomain(domain)" class="el-icon-delete"></el-button>
          <!-- <el-button type="warning" @click="updateThin(domain, dynamicValidateForm.name, 'update')" plain>更新</el-button> -->
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div> -->
    </el-dialog>
    <el-dialog title="创建计划" :visible.sync="centerDialogVisible" width="30%" append-to-body center>
        <el-form label-position="top" label-width="80px" :model="planList">
                <el-form-item label="计划名称(12字以内)" >
                    <el-input  type="text" v-model="planList.name" maxlength="12" show-word-limit></el-input>
                </el-form-item>
               <el-form-item label="计划标签">
                    <el-tag :key="tag" v-for="tag in planList.tags"  closable :disable-transitions="false" @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input class="input-new-tag"  v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                        >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 点击新建</el-button>
                 </el-form-item>
                 <el-form-item label="计划结束时间">
                  <el-date-picker
                    v-model="planList.deadline"
                    type="datetime"
                    placeholder="选择日期时间"
                    default-time="12:00:00">
                  </el-date-picker>
                 </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="warning" @click="createPlan">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllPlan, addPlan, deletePlan, getToDo, addThings, deleteThing, updateThing } from '@/utils/api/plan.js'
import moment from 'moment'
import '@/utils/plugins/debounce'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      planList: {
        name: '',
        tags: ['学习', '打卡'],
        deadline: ''
      },
      loading: true,
      centerDialogVisible: false, // 是否打开创建计划对话框
      inputVisible: false,
      inputValue: '',
      todoList: [],
      dialogFormVisible: false, // 是否打开计划详情对话框
      formLabelWidth: '120px',
      dynamicValidateForm: {
        domains: []
      }
    }
  },
  inject: ['reload'],
  beforeMount: function () {
    this.loadPlan()
  },
  created () {
  },
  filters: {
    // 格式化时间的过滤器
    dateFmt (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    // 获取个人所有计划
    loadPlan () {
      getAllPlan().then(res => {
        this.todoList = res.data.data
      })
      this.loading = false
    },
    // 删除待办数
    removeDomain (item) {
      this.$confirm('确认删除该待办项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteThing(item.id).then(() => {
          var index = this.dynamicValidateForm.domains.indexOf(item)
          if (index !== -1) {
            this.dynamicValidateForm.domains.splice(index, 1)
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除成功'
          });
          this.loadPlan()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 增加待办
    addDomain (id, name) {
      this.$prompt('请输入待办项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const data = [{
          name: value,
          state: "未完成"
        }]
        addThings(id, data).then(() => {
          this.open(name, id)
          this.loadPlan()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    // 更新待办项
    updateThin (domain, name, s) {
      this.dialogFormVisible = true
      const data = {
        id: domain.id,
        name: domain.name,
        planid: domain.planid,
        state: domain.state
      }
      if (s === 'state') {
        if (data.state === '已完成') {
          data.state = '未完成'
        } else {
          data.state = '已完成'
        }
      }
      updateThing(data).then(() => {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
        this.open(name, domain.planid)
        this.loadPlan()
      }).catch(() => {
        this.$message({
          message: '更新失败',
          type: 'error'
        })
      })
    },

    // 添加标签操作 element自带封装
    handleClose (tag) {
      this.planList.tags.splice(this.planList.tags.indexOf(tag), 1);
    },
    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm () {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.planList.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    // 创建计划
    createPlan () {
      const tag = {
        name: this.planList.name,
        tag1: this.planList.tags[0],
        tag2: this.planList.tags[1],
        tag3: this.planList.tags[2],
        deadline: moment(this.planList.deadline).format('yyyy-MM-DD HH:mm:ss')
      }
      addPlan(tag).then(res => {
        this.centerDialogVisible = false
        this.$notify({
          title: '成功',
          message: '计划创建成功',
          type: 'success'
        });
        this.loadPlan()
      })
    },
    // 根据id打开小柚计划详情页
    open (name, id) {
      this.dynamicValidateForm.name = name;
      this.dynamicValidateForm.id = id;
      getToDo(id).then(res => {
        this.dynamicValidateForm.domains = res.data.data
        this.dialogFormVisible = true;
        if (this.dynamicValidateForm.domains) {
          for (let i = 0; i < this.dynamicValidateForm.domains.length; i++) {
            if (this.dynamicValidateForm.domains[i].state === "已完成") {
              this.dynamicValidateForm.domains[i].bool = true
            } else {
              this.dynamicValidateForm.domains[i].bool = false
            }
          }
        }
      })
    },
    // 根据id删除小柚计划
    cutdown (id) {
      this.$confirm('确认删除吗？', '删除提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePlan(id).then(res => {
          this.$notify({
            title: '删除计划成功',
            type: 'success'
          })
          // 删除后重新加载这个页面
          this.loadPlan()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title{
    position: relative;
    top: 20px;
    p{
      text-align: center;
    }
    .big-title{
      font-size: 34px;
      margin-bottom: 10px;
      position: relative;
    .en-title{
      margin-top: 0;
    }
  }
  .big-title::before,.big-title::after{
        content: '';
        display: inline-block;
        width: 20px;
        height: 1px;
        background-color: #000;
        position: absolute;
        top: 20px;

      }
    .big-title::before{
      left: 50%;
      transform: translate(-102px, 0);
    }
    .big-title::after{
        right: 50%;
        transform: translate(102px, 0);
      }
      .el-divider__text, .el-link{
      font-size: 26px;
      background-color: transparent;
    }
    .el-divider{
      margin-top: 40px;
      background-color: #e4e4e4;
    }
    .el-button{
      border: none;
      margin-right: 100px;
    }
}
.list{
    width: 100%;
    display: inline-block;
    text-align: center;
    display: flex;
    justify-content: space-around;
  flex-direction: row;
            flex-wrap: wrap;
    .el-card{
      margin-top: 20px;
    width: 210px;
    text-align:left;
    border-radius: 10px;
    border-top: 5px solid orange;  cursor: pointer;
    .el-icon-delete{
      opacity: 0.1;
      text-align: center;
    }
    .el-icon-delete:hover{
      opacity: 1;
      transition: 1s;
    }
    .state{
      display: flex;
      justify-content:space-between;
      align-items: center;
    }
    .el-button{
      padding: 0;
      float: right;
      border: none;
      font-size: 20px;
     }
    }
    .el-card:hover{
                transform: scale(0.9);
                cursor: pointer;
    animation: fade-in;/*动画名称*/
    animation-duration: 0.5s;/*动画持续时间*/
    -webkit-animation:fade-in 0.5s;/*针对webkit内核*/
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
    }
    .el-progress::before{
      background-color: #fff;
    }
    /deep/.el-progress-circle{
      width: 90px;
    }
    .list-item{
      p{
        color: gray;
        font-size: 10px;
      }
      .el-tag{
        margin: 0 3px;
      }
    }
}
/deep/ .domain{
  display: flex;
  justify-content: center;
    align-items: center;
  .el-form-item__content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3px;
  }
  .el-input--mini{
    margin-left: 10px;
    margin-right: 10px;
  }
}
 /deep/.titles{
      position: absolute;
      right: 50px;
    }
  #planName{
    font-size: 16px;
    color: #000;
    font-weight: 600;
    margin: 20px 0;
    width:85%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
